<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>svg-countdown</title>
	<style>
		body {
			display: grid;
			place-items: center;
			height: 100vh;
			background-color: #282c34;
			--t: 10;
		}

		/* @property --t {
			syntax: '<number>';
			initial-value: 10;
			inherits: true;
		} */

		/* @property --s {
			syntax: '<integer>';
			initial-value: 0;
			inherits: true;
		} */

		.countdown {
			display: grid;
			width: 20em;
			height: 20em;
			/* animation: lin 10s linear infinite; */
		}
		.countdown::after {
			grid-column: 1;
			grid-row: 1;
			place-self: center;
			font-size: 5em;
			color: #fff;
			--s: calc(var(--t) / 1);
			counter-reset: s var(--s);
			content: '00:' counter(s, decimal-leading-zero);
		}
		
		.circle {
			grid-column: 1;
			grid-row: 1;
		}
			
		.circle-01 {
			fill: none;
			stroke: #fff;
		}

		.circle-02 {
			fill: none;
			transform: rotate(-90deg);
			stroke-linecap: round;
			--k: calc(var(--t) / 10);
			stroke: color-mix(in hsl shorter hue,
					#8a9b0f calc(var(--k) * 100%),
					#940a3d);
			stroke-dasharray: var(--k) 1;
		}

		@keyframes lin {
			to {
				--t: 0;
			}
		}
	</style>
</head>

<body>
	<div class="countdown">
		<svg viewBox="-50 -50 100 100" stroke-width="10" class="circle">
			<circle r="45" class="circle-01"></circle>
			<circle r="45" class="circle-02" pathLength="1"></circle>
		</svg>
	</div>
	<script>
		countdown();
		
		function countdown(){
			let t = 10;
			let timer = setInterval(() => {
				document.body.style.setProperty('--t', t);
				if(t < 1){
					clearInterval(timer);
					return
				}
				t -= 1;
			}, 1000)
		}
	</script>
</body>

</html>